export default {
  /*
  * 提示弹窗封装js组件
  * 调用方式  this.$honexunMessage(title, content, fn)
  * 参数说明 title - 左上角标题  content - 提示区内容  fn - 点击确定的回调函数
  * */
  honexunMessage(title, content, fn) {
    let htmlStr = `<div style="position: fixed; background: rgba(0,0,0,0.30); width: 100%; height: 100%; z-index: 1000; left: 0; top: 0; right: 0; bottom: 0;">
      <div style="background: #fff; width: 400px; height: 200px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto;">
        <div style="padding: 11px 16px; position: relative;">
          <div style="font-size: 14px; color: #333; font-weight: 500;">${title}</div>
          <div class="tooltips-dialog_close" style="position: absolute; width: 33px; height: 33px; padding: 10px; cursor: pointer; top: 1px; right: 7px; box-sizing: border-box;">
            <img alt="关闭" style="width: 13px; height: 13px;" src="" >
          </div>
          <div style="width: 100%; height: 100px; padding: 0 8px 0 24px; display: flex; flex-wrap: wrap; align-content: center; margin-bottom: 16px;">
            <span style="font-size: 12px; color: #333; line-height: 20px;">${content}</span>
          </div>
          <div class="tooltips-dialog_close" style="width: 56px; height: 32px; background: #d73737; -webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px; line-height: 32px; font-size: 12px; color: #fff; float: right; text-align: center; cursor: pointer; user-select: none;">确定</div>
        </div>
      </div>
    </div>`;
    let oldDialog = document.getElementById('tooltips-dialog');
    if (oldDialog) oldDialog.remove();
    let oDiv = document.createElement('div');
    oDiv.id = 'tooltips-dialog';
    document.getElementById('app').appendChild(oDiv);
    let tooltipsDialog = document.getElementById('tooltips-dialog');
    tooltipsDialog.innerHTML = htmlStr;
    let closeBtn = tooltipsDialog.getElementsByClassName('tooltips-dialog_close');
    for (let item of closeBtn) {
      item.addEventListener('click', function () {
        tooltipsDialog.remove();
        if (typeof fn === "function") fn();
      }, false);
    }
  },
  /*
  * 图片预览弹窗
  * 调用方式 this.$imagePreview(图片地址)
  * 参数说明：ImageUrl - 预览的图片地址
  * */
  imagePreview(imageUrl) {
    let htmlStr = `<div style="width: 100%;height: 100%; position: fixed; background: rgba(0,0,0,0.30); top: 0; bottom: 0; left: 0; right: 0; z-index: 1002;">
      <img style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; max-width: 80%; max-height: 80%;" src="${imageUrl}" alt="未找到您要查看的图片">
    </div>`;
    let oldDialog = document.getElementById('image-preview-dialog');
    if (oldDialog) oldDialog.remove();
    let oDiv = document.createElement('div');
    oDiv.id = 'image-preview-dialog';
    document.getElementById('app').appendChild(oDiv);
    let previewImageDialog = document.getElementById('image-preview-dialog');
    previewImageDialog.innerHTML = htmlStr;
    previewImageDialog.addEventListener('click', function () {
      previewImageDialog.remove();
    }, false);
  },
  //
  /*
  * 下载文件的方法
  * 调用方式 this.$downloadFile(文件地址)
  * 参数说明：fileURL - 文件地址
  * */
  downloadFile(fileURL) {
    let elForm = document.createElement('form');
    elForm.method = 'post';
    elForm.target = 'iframe';
    elForm.action = fileURL;
    let iframe = document.createElement('iframe');
    iframe.id = 'frame';
    iframe.name = 'iframe';
    iframe.style = 'display:none;';
    document.getElementById('app').appendChild(elForm);
    document.getElementById('app').appendChild(iframe);
    //提交表单，实现下载
    elForm.submit();
  },
  /*
  * 兼容safari的时间格式化
  * 调用方式 this.$dateTrans(任意格式的时间类型)
  * 参数说明：t - 时间类型 例：yyyy-mm-dd || yyyy:mm:dd || 时间戳
  * */
  dateTrans(t){
    let time = null;
    t = String(t);
    if(isNaN(new Date(t).getTime())){
      time = new Date(t.replace(/-/g, '/'));
    }else{
      time = new Date(t);
    }
    if(isNaN(time.getTime())){
      t = Number(t);
      time = new Date(t)
    }
    return time;
  },
}
